<template>
  <div class="schema-container">
    <!--    <div v-for="(item,key) in schema.properties" class="schema-info">
          <el-text type="primary">{{ key }}</el-text>
          <el-text type="success">{{ item.title }}</el-text>
          <el-text type="info">{{ item.type }}</el-text>
          <el-text>{{ item.description }}</el-text>
        </div>-->
    {{schema}}
<!--    <el-tree :data="[schema.root]" :props="{label: 'title'}">

    </el-tree>-->
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: 'json-schema',
})
/*interface schema {
  type: string
  title: string
  description: string
  properties: {
    [key: string]: schema
  }
  required: string[]
}*/
const props = defineProps({
  schema: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<style scoped lang="scss">
.schema-container {
  display: flex;
  flex-direction: column;
  border: var(--ep-border);
  border-radius: 4px;

  .schema-info {
    display: flex;
    padding: 4px 8px;

    span {
      margin-right: 8px;

      width: 100px;

      &:last-child {


        flex: 1;
      }
    }

    .schema-title {

      //background: var(--ep-color-primary);
    }
  }

}
</style>
